<template>
	<view class="container">
		<TopBtn :title="'选择疾病'"></TopBtn>
		<searchBar :placeholder="'请输入疾病名称'" @chenge="chenge"></searchBar>
		<view class="info">
			<view class="listBox">
				<view class="flex-center mb_30 b_B_e" v-for="n in list" :key="n.id"
					@click="checkedBox(n.id,n.consultationStatus,n.consultationFee)">
					<view class="list flex-center">
						<image v-if="act.includes(n.id)" src="@/static/cooperate/xz2.png" mode=""></image>
						<view v-else class="">

						</view>
						{{n.name}}
					</view>
				</view>
				<view class="kong">

				</view>
			</view>
		</view>

		<view class="btnBox">
			<view class="">
				已选中 <text> {{act.length}}</text> 个
			</view>
			<view class="btn" @click="Submit()">
				确认
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getDiseaseControlPage,

	} from '@/api/user'
	export default {
		data() {
			return {
				act: [],
				list: [],
				request: {
					pageNo: 1,
					pageSize: 20,
					name: "",
				},
				maxNum: "",
				type: '',
				teamList: [],
				actTean: "",
				userId: uni.getStorageSync('userId'),

			};
		},
		onLoad(e) {
			this.type = e.type
			this.getDiseaseControlPage()
		},
		onReachBottom() {
			if (this.maxNum <= this.request.pageNo) return
			this.request.pageNo = this.request.pageNo + 1
			this.getDiseaseControlPage()
		},
		methods: {
			chenge(e){
				this.request.name = e
				this.list = []
				this.request.pageNo = 1
				this.getDiseaseControlPage()
			},
			Submit() {
				uni.$emit('ids', this.act.join(","))
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			getDiseaseControlPage() {
				getDiseaseControlPage(this.request).then(res => {
					this.list.push(...res.data.list)
					let num = res.data.total / this.request.pageSize
					if (num.toString().includes('.')) {
						num = Math.ceil(num)
					}
					this.maxNum = num
				})
			},
			checkedBox(val, status, num) {
				if (this.act.includes(val)) {
					this.act.splice(this.act.indexOf(val), 1)
					return
				}

				this.act.push(val)
				// this.show = false
			},
			goinfo(id) {
				if (id) {
					uni.navigateTo({
						url: `/pages/prescription/details/details?id=${id}`,
					})
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.searchBar {
		width: 100%;
		position: fixed;
		z-index: 9;
		top: 128rpx;
	}


	.info {
		display: flex;
		justify-content: space-between;
		padding-top: 103rpx;

		.teamList {
			position: fixed;
			top: 231rpx;
			width: 235rpx;
			background: #F9F9F9;
			border-radius: 0rpx 20rpx 20rpx 0rpx;

			.teamInfo {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				height: 100rpx;
				padding-left: 31rpx;
				line-height: 100rpx;
				align-items: center;
				display: flex;

				image {
					width: 24rpx;
					height: 27rpx;
					margin-right: 5rpx;
				}
			}

			.act {
				font-weight: bold;
				color: #3B6CFE;
				background-color: #fff;
				position: relative;

				&::after {
					display: inline-block;
					content: "";
					width: 4rpx;
					height: 28rpx;
					background: #3B6CFE;
					border-radius: 2rpx;
					position: absolute;
					left: 0;
				}
			}
		}
	}

	.b_B_e {
		border-bottom: 1px solid #EEEEEE80;
	}

	.btnBox {
		width: 749rpx;
		height: 130rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		padding: 0 50rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;

		text {
			margin: 0 5rpx;
		}

		.btn {
			width: 334rpx;
			height: 100rpx;
			background: #3B6CFE;
			border-radius: 50rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
		}
	}

	.listBox {
		background-color: #fff;
		flex: 1;
		min-height: calc(100vh - 231rpx);
		padding: 0 30rpx;

		&:last-child {
			border-bottom: none !important;
		}

		.cost {
			margin-top: 26rpx;

			.costNum {
				width: 229rpx;
				height: 68rpx;
				background: #FFFFFF;
				border-radius: 34rpx;
				border: 1px solid #EEEEEE;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;

				text {
					font-weight: bold;
					font-size: 28rpx;
					color: #E11010;
					margin-left: 12rpx;

				}
			}
		}

		.change {
			margin-right: 12rpx;

			text {
				display: inline-block;
				width: 30rpx;
				height: 30rpx;
				background: #999;
				border-radius: 50%;
				box-sizing: border-box;
				border: 1px solid #EEEEEE;
			}

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.list {
			flex: 1;
			min-height: 82rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			padding: 20rpx;
			box-sizing: border-box;

			font-weight: 500;
			font-size: 28rpx;
			color: #333333;

			image {
				width: 26rpx;
				height: 26rpx;
				background: #3B6CFE;
				border-radius: 5rpx;
				margin-right: 18rpx;
			}

			&>view {
				width: 26rpx;
				height: 26rpx;
				background: #FFFFFF;
				border-radius: 5rpx;
				box-sizing: border-box;
				border: 1px solid #EEEEEE;
				margin-right: 18rpx;
			}


		}
	}
</style>